<template>
  <div class="mapDiv">
    <div class="leftDiv">
      <div class="bjimg">
        <div class="bjaaa"></div>
      </div>
      <div class="aslider_s">
        <div class="asliderStyle">
          <div class="centerDiv">
            <ul>
              <li v-for="(item, index) in components" :key="index" @click="selectComponent(item, index)" >
                <div :style="{ 'background-image': item.selected ? 'url(' + selectedImageUrl + ')' : 'url(' + imageUrl + ')' }" :class="{ 'selected': selectedIndex === index }">
                  <img :src="getImgSrc(index)" alt="">
                  <span>{{ item.name }}</span>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="allDiv">
      <component :is="currentComponent"  :pageName="modelName" @change-page="changePage"></component>
    </div>
    <div class="rightDiv">
      <div class="bjimg">
        <div class="bjaaa"></div>
      </div>
    </div>
    <div class="bottomS">
      <div class="bottomS1"></div>
    </div>
  </div>
</template>

<script>


import mapz from "./mapz.vue";
import luans from "./luans.vue";
import diaodu from "./diaodu.vue";
import yuny from "./yuny.vue";
import shes from "./shes.vue";
import total from "./total.vue";
import set from "./set.vue";
import waterworks from "./waterworks.vue";
import waterku from "./waterku.vue";
import hedao from "./hedao.vue";
import zhishi from "./zhishi.vue";
import zhishi1 from "./zhishi1.vue";
import baoqif from './baoqi.vue'; // 导入子页面组件
import jiayaof from './jiayao.vue'; // 导入子页面组件
import mpublic from './mpublic.vue'; // 导入子页面组件
import fangzhen from './fangzhen.vue'; // 导入子页面组件
import dayin from './dayin.vue'; // 导入子页面组件
import imageUrl from '../../assets/images/ullib.png';
import selectedImageUrl from '../../assets/images/ullil.png';

import x1 from '../../assets/images/x1.png'; // 根据实际的文件路径修改引入路径
import x2 from '../../assets/images/x2.png'; // 根据实际的文件路径修改引入路径
import x3 from '../../assets/images/x3.png'; // 根据实际的文件路径修改引入路径
import x4 from '../../assets/images/x4.png'; // 根据实际的文件路径修改引入路径
import x5 from '../../assets/images/x5.png'; // 根据实际的文件路径修改引入路径
import x6 from '../../assets/images/x6.png'; // 根据实际的文件路径修改引入路径


export default {
  name: "Index",
  components:{
    waterworks,mapz,luans,diaodu,yuny,shes,total,set,waterku,hedao,zhishi,jiayaof,baoqif,mpublic,fangzhen,zhishi1,dayin
  },
  data() {
    return {
      selectedIndex:0,
      currentComponent: waterworks, // 初始选中项索引
      imageUrl:imageUrl,
      modelName:'',
      selectedImageUrl:selectedImageUrl,
      components: [ // 组件选项
        { name: '综合监测', component: 'waterworks', selected: true },
        { name: '数字孪生', component: 'luans', selected: false },
        { name: '智慧调度', component: 'diaodu', selected: false },
        { name: '智慧运营', component: 'yuny', selected: false },

        { name: '设施管理', component: 'shes', selected: false },
        { name: '统计分析', component: 'total', selected: false },
        // { name: '工艺仿真', component: 'fangzhen', selected: false },

        { name: '知识管理', component: 'zhishi1', selected: false },
        { name: '智慧打印', component: 'dayin', selected: false },
        // { name: '系统设置', component: 'set', selected: false },
        // 添加其他组件选项
      ],
      imageUrls: [
        x1,x2,x3,x4,x5,x6,x5,x3
      ],

    };
  },

  mounted() {
    // 监听子组件传递过来的事件


  },
  methods: {
    changePage(component) {
      // 接收子页面传递的组件名称，并更新当前显示的组件
      this.currentComponent = component.pageName;
      this.modelName = component.pageType;
    },
    UpdateCurrentComponent(data) {
      // 处理从子组件传递过来的名称和 ID
      const entityId = data.id;
      const entityType = data.type;
      if(entityType == '1'){
        this.currentComponent = waterku;
      }else if(entityType == '2'){
        this.currentComponent = hedao;
      }else if(entityType == '3'){
        this.currentComponent = waterworks;
      }

      // 进行进一步的操作，例如显示信息窗口等
    },
    selectComponent(item, index) {
      // if(index == 0){
      //   window.location.reload()
      // }else{
        // 将当前选中的组件设置为选中项
        const prevInfoDiv = document.getElementById('infoDiv');
        if (prevInfoDiv) {
          document.body.removeChild(prevInfoDiv);
        }
        this.currentComponent = item.component;
        this.selectedIndex = index;
        // 更新选中状态
        this.components.forEach((component, idx) => {
          component.selected = idx === index;
        });
      // }

    },
    getImgSrc(index) {
      return this.imageUrls[index];
    },

    switchToImageMap() {
      // this.map.removeLayer(this.tdtVecLayer);
    },
    switchToVectorMap() {
      // this.map.removeLayer(this.tdtImgLayer);
      // this.tdtVecLayer.addTo(this.map);
    }

  }
};
</script>

<style scoped lang="scss">
.mapDiv{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-image: url("../../assets/images/back.png");
  background-size: 100% 100%; /* 背景图片铺满并保持比例不变 */
  background-repeat: no-repeat; /* 不重复平铺 */
  background-position: center; /* 图片居中对齐 */
  margin: 0; /* 去除默认的外边距 */
  padding: 0; /* 去除默认的内边距 */
  .leftDiv{
    z-index: 555;
    width: 17%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background-image: url("../../assets/images/juxing.png");
    background-size: 100% 100%; /* 背景图片铺满并保持比例不变 */
    background-repeat: no-repeat; /* 不重复平铺 */
    background-position: center; /* 图片居中对齐 */
    margin: 0; /* 去除默认的外边距 */
    padding: 0; /* 去除默认的内边距 */
    .bjimg{
      width:4%;
      height: 100%;
      display: flex;
      align-items: center;
      z-index: 444;
      .bjaaa{
        width:100%;
        height: 70%;
        background-image: url("../../assets/images/leftimg.png");
        background-size: 100% 100%; /* 背景图片铺满并保持比例不变 */
        background-repeat: no-repeat; /* 不重复平铺 */
        background-position: center; /* 图片居中对齐 */
        margin: 0; /* 去除默认的外边距 */
        padding: 0; /* 去除默认的内边距 */
      }
    }
    .aslider_s{
      z-index: 333;
      width: 96%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      .asliderStyle{
        background-image: url("../../assets/images/leftKuang.png");
        background-size: 100% 100%; /* 背景图片铺满并保持比例不变 */
        background-repeat: no-repeat; /* 不重复平铺 */
        background-position: center; /* 图片居中对齐 */
        margin: 0; /* 去除默认的外边距 */
        padding: 0; /* 去除默认的内边距 */
        font-size: 1rem;
        width: 108%;
        height: 86%;
        position: absolute;
        left: -9%;
        .centerDiv{
          width: 92%;
          height: 100%;
          padding: 1rem 0rem 0rem 6rem;
          overflow: hidden;
          display: flex;
          align-items: center;
          ul {
            list-style-type: none;  /* 设置列表项的符号为无 */
            padding: 0;  /* 去除默认的内边距 */
            height: 80%;
            display: flex;
            flex-direction: column;
            li{
              cursor: pointer;
              flex: 1;
              div{
                width: 18rem;
                height: 2rem;
                font-family: PingFangSC, PingFang SC;
                font-weight: 500;
                font-size: 1.2rem;
                color: #90B7D3;
                line-height: 33px;
                text-align: left;
                font-style: normal;
                position: relative;
                background-size: cover; /* 背景图片铺满并保持比例不变 */
                background-repeat: no-repeat; /* 不重复平铺 */
                background-position: center; /* 图片居中对齐 */
                margin: 0; /* 去除默认的外边距 */
                padding: 0; /* 去除默认的内边距 */
                img{
                  width: 2rem;
                  height: 2rem;
                  position: absolute;
                  top: -0.8rem;
                  left: 1rem;
                }
                span{
                  position: absolute;
                  top: -1rem;
                  left: 4rem;
                }
              }
              .selected {
                color: white;
                font-size: 1.4rem!important;
              }
            }
          }
        }
      }
    }
  }
  .rightDiv{
    z-index: 333;
    position: absolute;
    top: 0;
    right: 0;
    width: 0.8%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: white;
    .bjimg{
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      z-index: 444;
      .bjaaa{
        width: 100%;
        height: 70%;
        background-image: url("../../assets/images/right.png");
        background-size: 100% 100%; /* 背景图片铺满并保持比例不变 */
        background-repeat: no-repeat; /* 不重复平铺 */
        background-position: center; /* 图片居中对齐 */
        margin: 0; /* 去除默认的外边距 */
        padding: 0; /* 去除默认的内边距 */
      }
    }
  }


  .allDiv{

    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 111;

  }
  .bottomS{
    position: absolute;
    bottom: 0;
    z-index: 999;
    width: 100%;
    height: 8%;

    background-image: url("../../assets/images/bottom2.png");
    background-size: cover; /* 背景图片铺满并保持比例不变 */
    background-repeat: no-repeat; /* 不重复平铺 */
    background-position: center; /* 图片居中对齐 */
    margin: 0; /* 去除默认的外边距 */
    padding: 0; /* 去除默认的内边距 */
    display: flex;
    align-items: flex-end;
    justify-content: center;
    .bottomS1{
      width: 100%;
      height: 3.5rem;
      background-image: url("../../assets/images/bottom.png");
      background-size: cover; /* 背景图片铺满并保持比例不变 */
      background-repeat: no-repeat; /* 不重复平铺 */
      background-position: center; /* 图片居中对齐 */
      margin: 0; /* 去除默认的外边距 */
      padding: 0; /* 去除默认的内边距 */

    }
  }

}
</style>

